<template>
    <div class="main-container">
        <!-- 头部 -->
        <div class="header f fac">
            <div></div>
            <div><a href="#home">首页</a></div>
            <div><a href="#about">关于我</a></div>
            <!-- <div>技能</div>
            <div>项目</div>
            <div>联系我</div> -->
        </div>

        <!-- 轮播图 -->
         <el-carousel id="home" indicator-position="outside" arrow="always" height="7rem">
            <el-carousel-item class="f fac fpc carousel" v-for="item in imageList" :key="item.url">
                <img :src="item.url" alt="">
            </el-carousel-item>
        </el-carousel>

        <!-- 关于我 -->
        <div class="about" id="about">
            <div class="title">关于我</div>
            <div class="info-box f">
                <div class="photo">
                    <img src="/src/assets/photo.png" alt="">
                </div>
                <div class="info f1 f fv fpc">
                    <div class="name">李子木</div>
                    <div class="desc">
                        全栈开发工程师，拥有 5 年工作经验。专注于 Web 开发和用户界面设计，擅长使用 React、Vue、Node.js 等技
术栈。全栈开发工程师，拥有 5 年工作经验。专注于 Web 开发和用户界面设计，擅长使用 React、Vue、Node.js 等技
术栈。全栈开发工程师，拥有 5 年工作经验。专注于 Web 开发和用户界面设计，擅长使用 React、Vue、Node.js 等技
术栈。
                    </div>
                    <div class="f fac info-detail">
                        <div class="item">
                            <div class="title">生日：</div>
                            <div class="desc">2000年13月45日</div>
                        </div>
                        <div class="item">
                            <div class="title">所在地：</div>
                            <div class="desc">重庆市渝中区</div>
                        </div>
                    </div>
                    <div class="f fac info-detail">
                        <div class="item">
                            <div class="title">邮箱：</div>
                            <div class="desc">11111111@qq.com</div>
                        </div>
                        <div class="item">
                            <div class="title">电话：</div>
                            <div class="desc">1111111111</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

const imageList = ref([
    { url: '/src/assets/L1.png' },
    { url: '/src/assets/L2.png' },
    { url: '/src/assets/L3.png' },
])

    
</script>

<style lang="scss" scoped>
.main-container {
    width: 100%;
    background-color: #fff;
    margin: auto;
    .header {
        width: 80%;
        height: 0.64rem;
        justify-content: flex-end;
        div {
            cursor: pointer;
            margin-right: 0.36rem;
            a {
                color: #000;
            }
        }
    }
    .carousel {
        height: 100%;
    }
    .about {
        margin: auto;
        margin-top: 0.8rem;
        width: 80%;
        .title {
            font-size: 0.24rem;
            font-weight: bold;
            text-align: center;
        }
        .info-box {
            .photo {
                width: 3.94rem;
                height: 4.93rem;
            }
            .info {
                font-size: 0.2rem;
                font-weight: bold;
                margin-left: 0.24rem;
                .name {
                    margin-bottom: 0.24rem;
                }
                .desc {
                    color: #4B5563;
                    font-size: 0.14rem;
                }
                .info-detail {
                    margin-top: 0.16rem;
                    width: 100%;
                    .item {
                        width: 50%;
                    }
                    .title {
                        font-size: 0.18rem;
                        text-align: left;
                    }
                }
                
            }
        }
    }
}
</style>